<template>
	<view class="notice_wap">
		<view class="notice_logo u-flex u-row-center">
			<view class="">
				<view class="trapezoid u-flex u-row-center">
					<image src="/static/common/notice.png" mode=""></image>
				</view>
				<view class="wifi-symbol">
					<view class="wifi-circle second">
						
					</view>
					<view class="wifi-circle third">
						
					</view>
				</view>
				
			</view>
		</view>
		<swiper :autoplay="true" :interval="3000" :duration="1000" :vertical="true" :circular="true">
			<swiper-item v-for="(item,index) in notice" :key="index" @click="goDetail(item)">
				<view class="swiper-item">【平台公告】{{item.title}}</view>
			</swiper-item>
		</swiper>
	</view>

</template>

<script>
	export default {
		props: {
			notice: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods:{
			goDetail(item){
				this.$emit('goDetail',item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.notice_wap {
		display: flex;
		background-color: #fff;
		border: 2rpx solid #E6E6E6;
		.notice_logo {
			width: 50rpx;
			height: 60rpx;
			border: 1px solid #c40200;
			line-height: 60rpx;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			.trapezoid{
				position: absolute;
				left: 7rpx;
				top: 50%;
				transform: translateY(-50%);
				image{
					width: 18rpx;
					height: 30rpx;
				}
			}
			.wifi-symbol {
				width: 40rpx;
				height: 40rpx;
				box-sizing: border-box;
				overflow: hidden;
				transform: rotate(135deg);
				position: absolute;
				top: 8rpx;
				left: 30rpx;
			}
			.wifi-circle {
				border: 2rpx solid #c40200;
				border-radius: 50%;
				position: absolute;
			}
			.second {
				width: 30rpx;
				height: 30rpx;
				top: 30rpx;
				left: 30rpx;
				animation: fadeInOut 1s infinite 0.2s;
			}
			.third {
				width: 30rpx;
				height: 30rpx;
				top: 25rpx;
				left: 25rpx;
				animation: fadeInOut 1s infinite 0.4s;
			}
		
			@keyframes fadeInOut {
				0% {
					opacity: 0; /*初始状态 透明度为0*/
				}
				100% {
					opacity: 1; /*结尾状态 透明度为1*/
				}
			}
		}

		swiper {
			flex: 1;
			height: 60rpx;
			line-height: 60rpx;
			box-sizing: border-box;

			.swiper-item {
				padding: 0rpx 30rpx 0 0;
				font-weight: bold;
				color: #000000;
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;

			}
		}
	}
</style>
